<script setup>
import {onMounted, ref} from "vue";
import {getInventoryList} from "@/apis/inventory";
import {useRouter} from "vue-router";

const data = ref([]);
const loading = ref(false);
const router = useRouter();

onMounted(() => {
  loading.value = true;
  getInventoryList()
      .then(res => {
        const {code} = res.data;
        if (code === 1) {
          res.data.data.forEach(item => {
            if (item.status !== 0) {
              data.value.push(item)
            }
          })
        }
      })
      .finally(() => {
        loading.value = false;
      })
})

function gotoInfo(id) {
  router.push({
    name: 'record-info',
    params: {id: id}
  })
}
</script>
<template>
  <main>
    <div v-if="loading" style="display: flex; justify-content: center;padding: 16px;">
      <t-loading theme="dots" size="40px" text="努力加载中..."/>
    </div>
    <t-cell-group v-else>
      <t-cell v-for="item in data" hover arrow :key="item.id" :title="item.title"
              :description="'创建时间: ' + item.create_time" @click="gotoInfo(item.id)">
        <template #image>
          <t-icon :name="item.type == 0 ? 'arrow-triangle-down-filled' : 'arrow-triangle-up-filled'" size="large"
                  style="color: #0052d9;"></t-icon>
        </template>
      </t-cell>
    </t-cell-group>
  </main>
</template>